<template>
  <router-link tag="li" :to="to" :class="['dg-nav-item', 'dg-text-gray', { 'dg-nav-active': active }]">
    <span>
      <slot></slot>
    </span>
  </router-link>
</template>

<script>

export default {
  name: 'dg-nav-item',
  props: {
    active: {
      type: Boolean,
      default: false
    },
    to: {
      validator(value) {
        return (typeof value === 'string') || (toString.call(value) === '[object Object]' && value.path);
      }
    }
  }
}
</script>

<style>
</style>